<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">{{sportId == 1 ? '足球筛选' : '篮球筛选'}}</text>
		</uni-nav-bar>
		<view class="head flex-r ac jsb">
			<view class="tab-head flex-r ac">
				<view class="tab-list flex-c" v-for="(item,index) in tabLists[sportId-1]" :key="index" @tap="tabChange(index)">
					<text :class="{'active': tabCur == index}">{{item.name}}</text>
				</view>
			</view>
			<view class="select flex-r ac" @tap="selectAllMatch">
				<image src="@/public/images/match/qxxz.png" mode="aspectFit" v-if="isSelectAll"></image>
				<image src="@/public/images/match/qxwxz.png" mode="aspectFit" v-else></image>
				<text class="text-regular color-grey">全选</text>
			</view>
		</view>
		<view class="body">
			<template v-for="(item, tabIndex) in tabLists[sportId-1]">
				<keep-alive>
					<view class="match flex-r ac" v-if="tabCur == tabIndex" :key="tabIndex">
						<view class="match-item flex-r ac jc" v-for="(match, index) in matchList[tabCur]" :key="index" :class="{'active': tabData[tabCur].selectAll || selectIds[tabCur].indexOf(match.id) > -1}" @tap="selectMatch(match.id, index)">
							<text class="text-small text-hidden">{{match.shortNameZh || match.nameZh}}</text>
						</view>
						<EmptyContent v-if="!matchList[tabCur] || !matchList[tabCur][0]" top="160rpx" text="暂无赛事" img="qsy_zwxl" @refresh="getMatchList"></EmptyContent>
					</view>
				</keep-alive>
			</template>
		</view>
		<view class="foot flex-c bottom-ios">
			<view class="submit flex-r ac jsb">
				<view class="match-info text-primary flex-r ac">
					<text>已选择</text>
					<text class="color-red">{{matchNum}}</text>
					<text>场比赛</text>
				</view>
				<button class="btn active" size="mini" @tap="goSearch">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datetime: '',
				sportId: 1,
				selectIds: new Array([],[],[]),
				matchList: [],
				
				tabLists: [
					[{name: '全部'},{name: '竞足'},{name: '北单'}],
					[{name: '全部'},{name: '竞篮'}]
				],
				tabArr: [],
				tabCur: 0,
				tabData: [
					{pageNo: 1,	selectAll: false},
					{pageNo: 1,	selectAll: false},
					{pageNo: 1,	selectAll: false}
				],
			}
		},
		computed: {
			isSelectAll() {
				if(this.matchList[this.tabCur] && this.matchList[this.tabCur][0]){
					return this.matchList[this.tabCur].every((item) => {
						return this.selectIds[this.tabCur].includes(item.id)
					})
				}else{
					return false
				}
			},
			matchNum() {
				let matchNum = 0
				if(this.matchList[this.tabCur]){
					this.selectIds[this.tabCur].forEach((id) => {
						let match = this.matchList[this.tabCur].find(item => item.id == id)
						if(match){
							matchNum += match.matchNum
						}
					})
				}
				return matchNum
			}
		},
		onLoad(e) {
			console.log(this.$Route.query);
			let today = this.$CHS.getNowDate()
			if(this.$Route.query.sportId){
				this.sportId = this.$Route.query.sportId
			}
			if(this.$Route.query.day){
				this.datetime = this.$Route.query.day
			}else{
				this.datetime = today
			}
			if(this.$Route.query.type){
				this.tabCur = this.$Route.query.type
			}
			this.tabArr.push(this.tabCur)
			let selectMatchData = uni.getStorageSync('selectMatchIds_'+this.sportId.toString()) || null
			if(selectMatchData && typeof selectMatchData != 'string'){
				if(selectMatchData.today && selectMatchData.today == today){//赛事筛选当天有效
					let selectMatchIds = selectMatchData.selectIds
					let selectIds = selectMatchIds.split(",").map((item) => {
						return Number(item)
					})
					this.$set(this.selectIds, this.tabCur, selectIds)
					this.getMatchList(false)
				}else{
					this.getMatchList(true)
				}
			}else{
				this.getMatchList(true)
			}
		},
		methods: {
			//确定搜索
			goSearch() {
				if(this.matchNum > 0){
					if(this.isSelectAll){
						uni.removeStorageSync('selectMatchIds_'+this.sportId.toString())
						let params = {sportId: this.sportId, day: this.datetime, matchType: this.tabCur, filter: true}
						this.$Router.pushTab({ name:'matchlist', params })
					}else{
						let selectIds = []
						this.matchList[this.tabCur].forEach(item => {
							if(this.selectIds[this.tabCur].includes(item.id)){
								selectIds.push(item.id)
							}
						})
						let today = this.$CHS.getNowDate()
						let selectMatchData = {
							today,
							matchType: this.tabCur,
							selectIds: selectIds.toString()
						}
						uni.setStorageSync('selectMatchIds_'+this.sportId.toString(), selectMatchData)
						let params = {sportId: this.sportId, day: this.datetime, matchType: this.tabCur, filter: true}
						this.$Router.pushTab({ name:'matchlist', params })
					}
				}else{
					uni.showToast({
						title: '请选择至少一个赛事',
						icon: 'none'
					})
				}
			},
			//获取赛事
			getMatchList(all){
				this.$http.get({
					url: '/api/queryMatchCategooryRows',
					data: {
						datetime: this.datetime,
						sportId: this.sportId,
						type: this.tabCur
					},
				}).then(data => {
					console.log(data);
					if(data.success){
						this.$set(this.matchList, this.tabCur, data.result)
						if(all){
							this.selectAllMatch()
						}
					}else{
						uni.showToast({
							title: data.message,
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//选择赛事
			selectMatch(id, listIndex) {
				console.log(id);
				let index = this.selectIds[this.tabCur].indexOf(id)
				if(index > -1){
					this.selectIds[this.tabCur].splice(index, 1)
					this.tabData[this.tabCur].selectAll = false
				}else{
					if(Object.keys(this.selectIds[this.tabCur]).length == 0){
						this.$set(this.selectIds, this.tabCur, [id])
					}else{
						this.selectIds[this.tabCur].push(id)
					}
				}
				this.$forceUpdate()
			},
			//全选赛事
			selectAllMatch() {
				if(!this.isSelectAll){
					this.selectIds[this.tabCur] = []
					let selectIds = []
					this.matchList[this.tabCur].map((item, index) => {
						selectIds.push(item.id)
					})
					this.$set(this.selectIds, this.tabCur, selectIds)
				}else{
					this.$set(this.selectIds, this.tabCur, [])
				}
				this.$forceUpdate()
			},
			//选项卡切换
			tabChange(index) {
				this.tabCur = index;
				if(this.tabArr.indexOf(index) == -1){
					this.tabArr.push(index)
					this.getMatchList(true)
				}
			}
		}
	}
</script>

<style lang="scss">
	.container{
		position: relative;
		.head{
			width: 100%;
			height: 80rpx;
			position: absolute;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #F2F5FA;
			z-index: 2;
			.tab-head{
				.tab-list{
					height: 80rpx;
					line-height: 80rpx;
					text{
						font-size: 28rpx;
						font-weight: 500;
						color: #999999;
					}
					.active{
						color: #4C88FF;
					}
					padding-right: 35rpx;
					margin-right: 35rpx;
				}
				.tab-list:first-child text{
					margin-right: 0;
				}
			}
			.select{
				.color-grey{
					color: #666666;
					margin-left: 15rpx;
				}
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.body{
			min-height: calc(var(--safe-height) - #{$navbar-height} - 80rpx - 140rpx);
			padding: 80rpx 0 calc(var(--safe-area-inset-bottom) + 140rpx);
			background-color: #FFFFFF;
			background-clip: content-box;
			.match{
				padding: 20rpx 20rpx 0;
				flex-wrap: wrap;
				.match-item{
					width: 162rpx;
					height: 60rpx;
					margin: 0 20rpx 20rpx 0;
					border-radius: 35rpx;
					color: #666666;
					border-radius: 10rpx;
					border: 1rpx solid #CCCCCC;
					box-sizing: border-box;
					&.active{
						color: #4C88FF;
						background: #F2F7FF;
						border: 2rpx solid #4C88FF;
					}
					.text-hidden{
						max-width: 120rpx;
					}
				}
				.match-item:nth-child(4n){
					margin-right: 0;
				}
				.empty-content{
					width: 100%;
					box-sizing: border-box;
				}
			}
		}
		.foot{
			max-width: $max-width;
			margin: $pc-margin;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			.submit{
				height: 120rpx;
				box-sizing: border-box;
				border-top: 1rpx solid #EDEDED;
				padding: 16rpx 20rpx;
				.color-red{
					margin: 0 10rpx;
				}
				.btn{
					width: 240rpx;
					height: 88rpx;
					background: #B2CCFF;
					border-radius: 44rpx;
					font-size: 32rpx;
					line-height: 88rpx;
					color: #FFFFFF;
					padding: 0;
					margin: 0;
					&.active{
						background: #0055FF;
					}
				}
			}
		}
	}
</style>
